<template name="loading">
	<view class="loading-wave">
		<view class="loading-bar"></view>
		<view class="loading-bar"></view>
		<view class="loading-bar"></view>
		<view class="loading-bar"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.loading-wave {
		width: 100%;
		height: 10px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		//padding-bottom: env(safe-area-inset-bottom);
	}

	.loading-bar {
		width: 5px;
		height: 2px;
		margin: 0 5px;
		background-color: #f39066;
		border-radius: 5px;
		animation: loading-wave-animation 1s ease-in-out infinite;
	}

	.loading-bar:nth-child(2) {
		animation-delay: 0.1s;
	}

	.loading-bar:nth-child(3) {
		animation-delay: 0.2s;
	}

	.loading-bar:nth-child(4) {
		animation-delay: 0.3s;
	}

	@keyframes loading-wave-animation {
		0% {
			height: 2px;
		}

		50% {
			height: 10px;
		}

		100% {
			height: 2px;
		}
	}
</style>